 /*
 * @description: 红包组件
 * @Author: along
 * @Date: 2021-02-24
 * @Last Modified by: along
 * @Last Modified time: 2021-02-24
 */
<template>
    <div
        class="couponList"
        @click="emitEvent(104)"
    >
        <!-- 有数据 -->
        <div v-if="baseconfig.data.packet_nos.length > 0 && combination.length > 0">
            <!-- 排列组合 【排列样式、红包样式、红包颜色】 -->
            <div
                v-if="combination[0] == 0"
                data-text="大图样式"
            >
                <div
                    class="_sing"
                    :style="{background: baseconfig.style.coupon_backgroundColor}"
                >
                    <!-- 样式一 -->
                    <div
                        class="_sing_item"
                        v-if="combination[1] == 0"
                    >
                        <div
                            data-text="大图样式/样式一"
                            class="_sing_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponBigBackground[0][combination[2]]['src']}`"
                                class="_sing_list_image"
                            >
                            <div class="_sing_wrap">
                                <div class="_sing_left">
                                    <div class="_sing_price">
                                        <p
                                            class="_sing_icon"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >¥</p>
                                        <p
                                            class="_sing_number"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div
                                        class="_sing_info"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</div>
                                </div>
                                <div class="_sing_center">
                                    <p
                                        class="_sing_title"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >{{ option.title }}</p>
                                    <p
                                        class="_sing_date"
                                        :style="{color: combination[2] == 4 ? 'rgba(238, 78, 89, 0.8)' : 'rgba(255, 255, 255, .8)'}"
                                    >
                                        {{ option.get_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ option.get_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                                    </p>
                                    <p
                                        class="_sing_type"
                                        :style="{color: combination[2] == 4 ? 'rgba(238, 78, 89, 0.8)' : 'rgba(255, 255, 255, .8)'}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                </div>
                                <div
                                    class="_sing_button"
                                    :style="{color: combination[2] == 0 ? 'rgba(255, 22, 71, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 ? 'rgba(255, 234, 202, 1)' : (combination[2] == 1 || combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 66, 81, 1)')}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 样式二 -->
                    <div
                        class="_sing_item"
                        v-if="combination[1] == 1"
                    >
                        <div
                            data-text="大图样式/样式二"
                            class="_sing_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            :style="{height: '78px'}"
                        >
                            <img
                                :src="`${couponBigBackground[1][combination[2]]['src']}`"
                                class="_sing_list_image"
                                :style="{height: '78px'}"
                            >
                            <div
                                class="_sing_wrap"
                                :style="{height: '78px'}"
                            >
                                <div class="_sing_left">
                                    <div class="_sing_price">
                                        <p
                                            class="_sing_icon"
                                            :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                        >¥</p>
                                        <p
                                            class="_sing_number"
                                            :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div
                                        class="_sing_info"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                    >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</div>

                                </div>
                                <div
                                    class="_sing_center"
                                    :style="{width: '168px'}"
                                >
                                    <p
                                        class="_sing_title"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                    >{{ option.title }}</p>
                                    <p
                                        class="_sing_date"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                    >
                                        {{ option.get_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ option.get_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                                    </p>
                                    <p
                                        class="_sing_type"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                </div>
                                <div
                                    class="_sing_button_to"
                                    :style="{color: combination[2] == 0 ? 'rgba(245, 51, 51, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 1 || combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 66, 81, 1)')}"
                                >
                                    <p class="_sing_button_to_text">
                                        立即领取
                                    </p>
                                </div>
                                <p
                                    class="_sing_linr"
                                    :style="{background: combination[2] == 4 ? 'linear-gradient(180deg, rgba(255, 221, 163, 0) 0%, #FFDDA3 48%, rgba(255, 221, 163, 0) 100%)' : (combination[2] == 0 || combination[2] == 1 ? 'linear-gradient(180deg, rgba(255, 221, 163, 0) 0%, #FFDDA3 48%, rgba(255, 221, 163, 0) 100%)' : (combination[2] == 2 ? 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%)' : 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%)'))}"
                                />
                            </div>
                        </div>
                    </div>
                    <!-- 样式三 -->
                    <div
                        class="_sing_item"
                        v-if="combination[1] == 2"
                    >
                        <div
                            data-text="大图样式/样式三"
                            class="_sing_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            :style="{height: '95px'}"
                        >
                            <img
                                :src="`${couponBigBackground[2][combination[2]]['src']}`"
                                class="_sing_list_image"
                                :style="{height: '95px'}"
                            >
                            <div
                                class="_sing_wrap"
                                :style="{height: '95px'}"
                            >
                                <div class="_sing_left">
                                    <div class="_sing_price">
                                        <p
                                            class="_sing_icon"
                                            :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >¥</p>
                                        <p
                                            class="_sing_number"
                                            :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div
                                        class="_sing_info"
                                        :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, .7)')))}"
                                    >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</div>
                                </div>
                                <div
                                    class="_sing_center"
                                    :style="{width: '168px'}"
                                >
                                    <p
                                        class="_sing_title"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 241, 197, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >{{ option.title }}</p>
                                    <p
                                        class="_sing_date"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 241, 197, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >
                                        {{ option.get_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ option.get_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                                    </p>
                                    <p
                                        class="_sing_type"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 241, 197, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                </div>
                                <div
                                    class="_sing_button_three"
                                    :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 样式四 -->
                    <div
                        class="_sing_item"
                        v-if="combination[1] == 3"
                    >
                        <div
                            data-text="大图样式/样式四"
                            class="_sing_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            :style="{height: '88px'}"
                        >
                            <img
                                :src="`${couponBigBackground[3][combination[2]]['src']}`"
                                class="_sing_list_image"
                                :style="{height: '88px'}"
                            >
                            <img
                                :src="`${couponBigbutton[3][combination[2]]['src']}`"
                                class="_sing_button_image"
                            >
                            <div
                                class="_sing_wrap"
                                :style="{height: '88px'}"
                            >
                                <div class="_sing_left">
                                    <div class="_sing_price">
                                        <p
                                            class="_sing_icon"
                                            :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                        >¥</p>
                                        <p
                                            class="_sing_number"
                                            :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div
                                        class="_sing_info"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 221, 163, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(247, 255, 254, 1)')}"
                                    >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</div>
                                </div>
                                <div
                                    class="_sing_center"
                                    :style="{width: '168px'}"
                                >
                                    <p
                                        class="_sing_title"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >{{ option.title }}</p>
                                    <p
                                        class="_sing_date"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, .8)')}"
                                    >
                                        {{ option.get_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ option.get_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                                    </p>
                                    <p
                                        class="_sing_type"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, .8)')}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 样式五 -->
                    <div
                        class="_sing_item"
                        v-if="combination[1] == 4"
                    >
                        <div
                            data-text="大图样式/样式五"
                            class="_sing_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            :style="{height: '94px'}"
                        >
                            <img
                                :src="`${couponBigBackground[4][combination[2]]['src']}`"
                                class="_sing_list_image"
                                :style="{height: '94px'}"
                            >
                            <div
                                class="_sing_wrap"
                                :style="{height: '94px'}"
                            >
                                <div
                                    class="_sing_left"
                                    :style="{marginRight: '30px'}"
                                >
                                    <div class="_sing_price">
                                        <p
                                            class="_sing_icon"
                                            :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >¥</p>
                                        <p
                                            class="_sing_number"
                                            :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div
                                        class="_sing_info"
                                        :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, .7)')))}"
                                    >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</div>
                                </div>
                                <div
                                    class="_sing_center"
                                    :style="{width: '168px'}"
                                >
                                    <p
                                        class="_sing_title"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >{{ option.title }}</p>
                                    <p
                                        class="_sing_date"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, .8)' : 'rgba(255, 255, 255, .8)'}"
                                    >
                                        {{ option.get_start_time * 1000 | dateFormatter('yyyy/MM/dd') }} - {{ option.get_end_time * 1000 | dateFormatter('yyyy/MM/dd') }}
                                    </p>
                                    <p
                                        class="_sing_type"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, .8)' : 'rgba(255, 255, 255, .8)'}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                </div>
                                <div
                                    class="_sing_five_button"
                                    :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(249, 133, 53, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 ? 'rgba(255, 223, 176, 1)' : (combination[2] == 1 ? 'rgba(255, 223, 176, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 66, 81, 1)'))}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                v-if="combination[0] == 1"
                data-text="一行两个"
            >
                <div
                    class="_big"
                    :style="{background: baseconfig.style.coupon_backgroundColor}"
                >
                    <!-- 样式一 -->
                    <div
                        class="_big_item"
                        v-if="combination[1] == 0"
                    >
                        <div
                            data-text="一行两个/样式一"
                            class="_big_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponTwoBackground[0][combination[2]]['src']}`"
                                class="_big_list_image"
                            >
                            <div class="_big_wrap">
                                <div class="_big_top">
                                    <div class="_big_item_list">
                                        <p
                                            class="_big_icon"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >¥</p>
                                        <p
                                            class="_big_number"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <p
                                        class="_big_line"
                                        :style="{background: combination[2] == 4 ? 'linear-gradient(180deg, rgba(247, 66, 81, 0) 0%, #F74251 48%, rgba(247, 66, 81, 0) 100%)' : 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%)'}"
                                    />
                                    <div class="_big_detail">
                                        <p
                                            class="_big_info"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                        <p
                                            class="_big_type"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >{{ option.use_limit_type | filterType }}</p>
                                    </div>
                                </div>
                                <div
                                    class="_big_button"
                                    :style="{color: combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)'}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 样式二 -->
                    <div
                        class="_big_item"
                        v-if="combination[1] == 1"
                    >
                        <div
                            data-text="一行两个/样式二"
                            class="_big_two_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponTwoBackground[1][combination[2]]['src']}`"
                                class="_item_list_image"
                            >
                            <img
                                :src="`${couponTwoButton[1][combination[2]]['src']}`"
                                class="_item_list_button"
                            >
                            <div class="_item_list_wrap">
                                <div class="_list">
                                    <p
                                        class="_list_icon"
                                        :style="{color: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 84, 94, 1)') }"
                                    >¥</p>
                                    <p
                                        class="_list_number"
                                        :style="{color: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 84, 94, 1)') }"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_list_info"
                                    :style="{color: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 84, 94, 1)') }"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_list_type"
                                    :style="{color: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 84, 94, 1)') }"
                                >{{ option.use_limit_type | filterType }}</p>
                            </div>
                            <div
                                class="_list_up"
                                :style="{color: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(247, 84, 94, 1)') }"
                            >
                                立即领取
                            </div>
                        </div>
                    </div>
                    <!-- 样式三 -->
                    <div
                        class="_big_item"
                        v-if="combination[1] == 2"
                    >
                        <div
                            data-text="一行两个/样式三"
                            class="_big_three_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponTwoBackground[2][combination[2]]['src']}`"
                                class="_item_list_image"
                            >
                            <div class="_three_wrap">
                                <div class="_three_top">
                                    <div class="_three_left">
                                        <p
                                            class="_three_icon"
                                            :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(10, 166, 149, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >¥</p>
                                        <p
                                            class="_three_number"
                                            :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(10, 166, 149, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <div class="_three_detail">
                                        <p
                                            class="_three_info"
                                            :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(10, 166, 149, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                        <p
                                            class="_three_type"
                                            :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(10, 166, 149, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)')))}"
                                        >{{ option.use_limit_type | filterType }}</p>
                                    </div>
                                </div>
                                <div
                                    class="_three_button"
                                    :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(10, 166, 149, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 ? 'rgba(255, 213, 73, 1)' : (combination[2] == 1 ? 'rgba(255, 244, 214, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 111, 111, 1)'))}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 样式四 -->
                    <div
                        class="_big_item"
                        v-if="combination[1] == 3"
                    >
                        <div
                            data-text="一行两个/样式四"
                            class="_big_fore_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponTwoBackground[3][combination[2]]['src']}`"
                                class="_item_fore_bg"
                            >
                            <img
                                :src="`${couponTwoButton[3][combination[2]]['src']}`"
                                class="_item_fore_button"
                            >
                            <div class="_for_wrap">
                                <div class="_fore_price">
                                    <p
                                        class="_fore_icon"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >¥</p>
                                    <p
                                        class="_fore_number"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <div class="_fore_next">
                                    <p
                                        class="_fore_line"
                                        :style="{background: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    />
                                    <p
                                        class="_fore_type"
                                        :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    >{{ option.use_limit_type | filterType }}</p>
                                    <p
                                        class="_fore_line"
                                        :style="{background: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                    />
                                </div>
                                <p
                                    class="_fore_info"
                                    :style="{color: combination[2] == 0 ? 'rgba(255, 236, 201, 1)' : (combination[2] == 4 ? 'rgba(247, 84, 94, 1)' : 'rgba(255, 255, 255, 1)')}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 样式五 -->
                    <div
                        class="_big_item"
                        v-if="combination[1] == 4"
                    >
                        <div
                            data-text="一行两个/样式五"
                            class="_big_five_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponTwoBackground[4][combination[2]]['src']}`"
                                class="_item_five_bg"
                            >
                            <div class="_five_wrap">
                                <div class="_five_left">
                                    <div class="_five_price">
                                        <p
                                            class="_five_icon"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >¥</p>
                                        <p
                                            class="_five_number"
                                            :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                        >{{ option.discount_num }}</p>
                                    </div>
                                    <p
                                        class="_five_info"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >
                                        {{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}
                                    </p>
                                    <p
                                        class="_five_type"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >
                                        {{ option.use_limit_type | filterType }}
                                    </p>
                                </div>
                                <div
                                    class="_five_button"
                                    :style="{color: combination[2] == 4 ? 'rgba(255, 255, 255, 1)' : 'rgba(0, 0, 0, 0.8)'}"
                                >
                                    立即领取
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div
                v-if="combination[0] == 2"
                data-text="滑动样式"
            >
                <div
                    class="_item"
                    :style="{background: baseconfig.style.coupon_backgroundColor}"
                >
                    <!-- 样式一 -->
                    <div
                        class="_item_box"
                        v-if="combination[1] == 0"
                    >
                        <div
                            data-text="滑动样式/样式一"
                            class="_item_list"
                            v-for="(option, index) in couponShowData"
                            :key="index"
                        >
                            <img
                                :src="`${couponBg[0][combination[2]]['src']}`"
                                class="_item_list_image"
                            >
                            <img
                                :src="`${couponbutton[0][combination[2]]['src']}`"
                                class="_item_list_button"
                            >
                            <div class="_item_list_wrap">
                                <div class="_list">
                                    <p
                                        class="_list_icon"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >¥</p>
                                    <p
                                        class="_list_number"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_list_info"
                                    :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_list_type"
                                    :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                >{{ option.use_limit_type | filterType }}</p>
                            </div>
                            <div
                                class="_list_up"
                                :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                            >
                                立即领取
                            </div>
                        </div>
                    </div>
                    <!-- 样式二 -->
                    <div
                        class="_item_box"
                        v-if="combination[1] == 1"
                    >
                        <div
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            data-text="滑动样式/样式二"
                            class="_item_list"
                        >
                            <img
                                :src="`${couponBg[1][combination[2]]['src']}`"
                                class="_item_list_image"
                            >
                            <img
                                :src="`${couponbutton[1][combination[2]]['src']}`"
                                class="_item_list_b_button"
                            >
                            <div class="_item_list_wrap">
                                <div class="_list">
                                    <p
                                        class="_list_icon"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >¥</p>
                                    <p
                                        class="_list_number"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_list_info"
                                    :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_list_type"
                                    :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(255, 255, 255, 1)'}"
                                >{{ option.use_limit_type | filterType }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 样式二 -->
                    <div
                        class="_item_main"
                        v-if="combination[1] == 2"
                    >
                        <div
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            data-text="滑动样式/样式三"
                            class="_main_item"
                        >
                            <img
                                :src="`${couponBg[2][combination[2]]['src']}`"
                                class="_item_list_image"
                            >
                            <div class="_main_next">
                                <p
                                    class="_main_title"
                                    :style="{color: combination[2] == 4 ? 'rgba(219, 141, 63, 1)' : 'rgba(243, 242, 255, 1)'}"
                                >{{ option.title }}</p>
                                <div class="_main_list">
                                    <p
                                        class="_main_icon"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(243, 242, 255, 1)'}"
                                    >¥</p>
                                    <p
                                        class="_main_number"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(243, 242, 255, 1)'}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_main_info"
                                    :style="{color: combination[2] == 4 ? 'rgba(219, 141, 63, 1)' : 'rgba(243, 242, 255, 1)'}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_main_type"
                                    :style="{color: combination[2] == 4 ? 'rgba(219, 141, 63, 1)' : 'rgba(243, 242, 255, 1)'}"
                                >{{ option.use_limit_type | filterType }}</p>
                                <p
                                    class="_main_button"
                                    :style="{color: combination[2] == 2 ? 'rgba(23, 168, 153, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : (combination[2] == 4 ? 'rgba(255, 255, 255, 1)' : 'rgba(248, 86, 46, 1)')) , background: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(250, 250, 250, 1)'}"
                                >
                                    立即领取
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 样式四 -->
                    <div
                        class="_item_ricl"
                        v-if="combination[1] == 3"
                    >
                        <div
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            data-text="滑动样式/样式四"
                            class="_ricl_item"
                        >
                            <img
                                :src="`${couponBg[3][combination[2]]['src']}`"
                                class="_item_ricl_image"
                            >
                            <div class="_ricl_wrap">
                                <div class="_ricl_list">
                                    <p
                                        class="_ricl_icon"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(243, 242, 255, 1)'}"
                                    >¥</p>
                                    <p
                                        class="_ricl_number"
                                        :style="{color: combination[2] == 4 ? 'rgba(247, 66, 81, 1)' : 'rgba(243, 242, 255, 1)'}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_ricl_info"
                                    :style="{color: combination[2] == 4 ? 'rgba(219, 141, 63, 1)' : 'rgba(243, 242, 255, 1)'}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_ricl_button"
                                    :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(249, 132, 53, 1)' : (combination[2] == 2 ? 'rgba(42, 188, 169, 1)' : (combination[2] == 3 ? 'rgba(103, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 || combination[2] == 1 ? 'rgba(255, 223, 181, 1)' : (combination[2] == 4 ? 'rgba(236, 82, 35, 1)' : 'rgba(255, 255, 255, 1)')}"
                                >
                                    立即领取
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 样式五 -->
                    <div
                        class="_item_hire"
                        v-if="combination[1] == 4"
                    >
                        <div
                            v-for="(option, index) in couponShowData"
                            :key="index"
                            data-text="滑动样式/样式五"
                            class="_hire_item"
                        >
                            <img
                                :src="`${couponBg[4][combination[2]]['src']}`"
                                class="_item_hire_image"
                            >
                            <div class="_hire_wrap">
                                <div class="_hire_list">
                                    <p
                                        class="_hire_icon"
                                        :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(253, 245, 174, 1)')))}"
                                    >¥</p>
                                    <p
                                        class="_hire_number"
                                        :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(253, 245, 174, 1)')))}"
                                    >{{ option.discount_num }}</p>
                                </div>
                                <p
                                    class="_hire_info"
                                    :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(253, 245, 174, 1)')))}"
                                >{{ option.discount_limit_type == 1 ? `满${option.discount_limit}元可用` : (option.discount_limit_type == 2 ? `满${option.discount_limit}件可用` : `无门槛`) }}</p>
                                <p
                                    class="_hire_type"
                                    :style="{color: combination[2] == 0 ? 'rgba(238, 78, 89, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(253, 245, 174, 1)')))}"
                                >{{ option.use_limit_type | filterType }}</p>
                                <p
                                    class="_hire_button"
                                    :style="{color: combination[2] == 0 ? 'rgba(245, 51, 65, 1)' : (combination[2] == 1 ? 'rgba(248, 133, 46, 1)' : (combination[2] == 2 ? 'rgba(39, 186, 170, 1)' : (combination[2] == 3 ? 'rgba(100, 81, 254, 1)' : 'rgba(255, 255, 255, 1)'))), background: combination[2] == 0 ? 'rgba(255, 213, 73, 1)' : (combination[2] == 1 ? 'rgba(255, 244, 214, 1)' : (combination[2] == 2 || combination[2] == 3 ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 111, 111, 1)'))}"
                                >
                                    立即领取
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <div v-if="baseconfig.data.packet_nos.length == 0">
            <img
                src="@/assets/image/packet-no.png"
                class="cate-none-image"
            >
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'CouponList',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data() {
        return {
            couponShowData: [],
            combination: [],//组合模式
            // 横滑
            couponBg: {
                0: [
                    { src: require('@/assets/image/active/a_bg-1.png') },
                    { src: require('@/assets/image/active/a_bg-2.png') },
                    { src: require('@/assets/image/active/a_bg-3.png') },
                    { src: require('@/assets/image/active/a_bg-4.png') },
                    { src: require('@/assets/image/active/a_bg-5.png') },
                ],
                1: [
                    { src: require('@/assets/image/active/b_bg-1.png') },
                    { src: require('@/assets/image/active/b_bg-2.png') },
                    { src: require('@/assets/image/active/b_bg-3.png') },
                    { src: require('@/assets/image/active/b_bg-4.png') },
                    { src: require('@/assets/image/active/b_bg-5.png') },
                ],
                2: [
                    { src: require('@/assets/image/active/c_bg-1.png') },
                    { src: require('@/assets/image/active/c_bg-2.png') },
                    { src: require('@/assets/image/active/c_bg-3.png') },
                    { src: require('@/assets/image/active/c_bg-4.png') },
                    { src: require('@/assets/image/active/c_bg-5.png') },
                ],
                3: [
                    { src: require('@/assets/image/active/d_bg-1.png') },
                    { src: require('@/assets/image/active/d_bg-2.png') },
                    { src: require('@/assets/image/active/d_bg-3.png') },
                    { src: require('@/assets/image/active/d_bg-4.png') },
                    { src: require('@/assets/image/active/d_bg-5.png') }
                ],
                4: [
                    { src: require('@/assets/image/active/e_bg-1.png') },
                    { src: require('@/assets/image/active/e_bg-2.png') },
                    { src: require('@/assets/image/active/e_bg-3.png') },
                    { src: require('@/assets/image/active/e_bg-4.png') },
                    { src: require('@/assets/image/active/e_bg-5.png') }
                ]
            },
            couponbutton: {
                0: [
                    { src: require('@/assets/image/active/a_button-1.png') },
                    { src: require('@/assets/image/active/a_button-2.png') },
                    { src: require('@/assets/image/active/a_button-3.png') },
                    { src: require('@/assets/image/active/a_button-4.png') },
                    { src: require('@/assets/image/active/a_button-5.png') },
                ],
                1: [
                    { src: require('@/assets/image/active/b_button-1.png') },
                    { src: require('@/assets/image/active/b_button-2.png') },
                    { src: require('@/assets/image/active/b_button-3.png') },
                    { src: require('@/assets/image/active/b_button-4.png') },
                    { src: require('@/assets/image/active/b_button-5.png') },
                ]
            },
            // 大图
            couponBigBackground: {
                0: [
                    { src: require('@/assets/image/active/l_bg_1.png') },
                    { src: require('@/assets/image/active/l_bg_2.png') },
                    { src: require('@/assets/image/active/l_bg_3.png') },
                    { src: require('@/assets/image/active/l_bg_4.png') },
                    { src: require('@/assets/image/active/l_bg_5.png') },
                ],
                1: [
                    { src: require('@/assets/image/active/m_bg_1.png') },
                    { src: require('@/assets/image/active/m_bg_2.png') },
                    { src: require('@/assets/image/active/m_bg_3.png') },
                    { src: require('@/assets/image/active/m_bg_4.png') },
                    { src: require('@/assets/image/active/m_bg_5.png') },
                ],
                2: [
                    { src: require('@/assets/image/active/x_bg_1.png') },
                    { src: require('@/assets/image/active/x_bg_2.png') },
                    { src: require('@/assets/image/active/x_bg_3.png') },
                    { src: require('@/assets/image/active/x_bg_4.png') },
                    { src: require('@/assets/image/active/x_bg_5.png') }
                ],
                3: [
                    { src: require('@/assets/image/active/y_bg_1.png') },
                    { src: require('@/assets/image/active/y_bg_2.png') },
                    { src: require('@/assets/image/active/y_bg_3.png') },
                    { src: require('@/assets/image/active/y_bg_4.png') },
                    { src: require('@/assets/image/active/y_bg_5.png') }
                ],
                4: [
                    { src: require('@/assets/image/active/z_bg_1.png') },
                    { src: require('@/assets/image/active/z_bg_2.png') },
                    { src: require('@/assets/image/active/z_bg_3.png') },
                    { src: require('@/assets/image/active/z_bg_4.png') },
                    { src: require('@/assets/image/active/z_bg_5.png') }
                ]
            },
            couponBigbutton: {
                3: [
                    { src: require('@/assets/image/active/y_button_1.png') },
                    { src: require('@/assets/image/active/y_button_2.png') },
                    { src: require('@/assets/image/active/y_button_3.png') },
                    { src: require('@/assets/image/active/y_button_4.png') },
                    { src: require('@/assets/image/active/y_button_5.png') }
                ]
            },
            // 一行两个
            couponTwoBackground: {
                0: [
                    { src: require('@/assets/image/active/t_bg_1.png') },
                    { src: require('@/assets/image/active/t_bg_2.png') },
                    { src: require('@/assets/image/active/t_bg_3.png') },
                    { src: require('@/assets/image/active/t_bg_4.png') },
                    { src: require('@/assets/image/active/t_bg_5.png') },
                ],
                1: [
                    { src: require('@/assets/image/active/n_bg_1.png') },
                    { src: require('@/assets/image/active/n_bg_2.png') },
                    { src: require('@/assets/image/active/n_bg_3.png') },
                    { src: require('@/assets/image/active/n_bg_4.png') },
                    { src: require('@/assets/image/active/n_bg_5.png') }
                ],
                2: [
                    { src: require('@/assets/image/active/o_bg_1.png') },
                    { src: require('@/assets/image/active/o_bg_2.png') },
                    { src: require('@/assets/image/active/o_bg_3.png') },
                    { src: require('@/assets/image/active/o_bg_4.png') },
                    { src: require('@/assets/image/active/o_bg_5.png') },
                ],
                3: [
                    { src: require('@/assets/image/active/s_bg_1.png') },
                    { src: require('@/assets/image/active/s_bg_2.png') },
                    { src: require('@/assets/image/active/s_bg_3.png') },
                    { src: require('@/assets/image/active/s_bg_4.png') },
                    { src: require('@/assets/image/active/s_bg_5.png') },
                ],
                4: [
                    { src: require('@/assets/image/active/p_bg_1.png') },
                    { src: require('@/assets/image/active/p_bg_2.png') },
                    { src: require('@/assets/image/active/p_bg_3.png') },
                    { src: require('@/assets/image/active/p_bg_4.png') },
                    { src: require('@/assets/image/active/p_bg_5.png') }
                ]
            },
            couponTwoButton: {
                1: [
                    { src: require('@/assets/image/active/n_button_1.png') },
                    { src: require('@/assets/image/active/n_button_2.png') },
                    { src: require('@/assets/image/active/n_button_3.png') },
                    { src: require('@/assets/image/active/n_button_4.png') },
                    { src: require('@/assets/image/active/n_button_5.png') }
                ],
                3: [
                    { src: require('@/assets/image/active/s_button_1.png') },
                    { src: require('@/assets/image/active/s_button_2.png') },
                    { src: require('@/assets/image/active/s_button_3.png') },
                    { src: require('@/assets/image/active/s_button_4.png') },
                    { src: require('@/assets/image/active/s_button_5.png') }
                ]
            }
        };
    },
    watch: {
        //优惠券样式
        baseconfig:  {
            handler: function (val, oldVal) {
                const combination = [
                    val.style.coupon_array,
                    val.style.coupon_style,
                    val.style.coupon_background
                ];

                this.getList();
                if(JSON.stringify(combination) == JSON.stringify(this.combination)) return false;
                this.combination = combination;

                // console.log('----combination----', this.combination);
            },
            deep: true,
            immediate:true
        }
    },
    computed: {
        ...mapState({
            // couponList: state => state.config.couponList
        }),

    },
    filters: {
        filterType (val) {
            if(val == 1) return '全部商品';
            if(val == 2) return '部分商品';
            if(val == 4) return '部分商品';
        }
    },
    mounted() {},
    methods: {
        /**
         * @ 获取优惠券
         */
        getList () {
            if(!this.baseconfig.data.packet_nos.length) return false;

            this.$post('/student/custom_page%5Cget_data_for_app_show', {
                type: 104,
                data_json: JSON.stringify({
                    packet_nos: this.baseconfig.data.packet_nos,
                    hide_invalid: this.baseconfig.data.hide_invalid
                })
            }, resp => {
                if(resp.code == 1){
                    // this.$set(this.baseconfig.data, 'packet_nos', resp.data.data.packet_list);
                    this.couponShowData = resp.data.data.packet_list;
                }
            });
        },

        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    },
};
</script>

<style lang="less" scoped>
.couponList {
    width: 375px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px dashed #ffffff;
    overflow: hidden;
    //无数据
    .cate-none-image {
        width: 355px;
        height: 170px;
    }
    //有数据
    ._item {
        width: 375px;
        overflow: hidden;
        overflow-x: auto;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        &::-webkit-scrollbar {
            height: 1px;
            width: 1px;
        }
        ._item_box {
            width: auto;
            display: flex;
            padding: 5px;
            box-sizing: border-box;
            ._item_list {
                width: 146px;
                height: 84px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 4px;
                ._item_list_image {
                    width: 146px;
                    height: 84px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._item_list_b_button {
                    width: 49px;
                    height: 84px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                }
                ._item_list_button {
                    width: 30px;
                    height: 84px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                }
                ._item_list_wrap {
                    width: 116px;
                    height: 84px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-left: 15px;
                    padding-top: 12px;
                    ._list {
                    height: 18px;
                    display: flex;
                    ._list_icon {
                        color: rgba(255, 236, 201, 1);
                        font-size: 12px;
                        height: 12px;
                        line-height: 12px;
                        margin-top: 4px;
                    }
                    ._list_number {
                            color: rgba(255, 236, 201, 1);
                            font-size: 17px;
                            font-weight: 500;
                            font-family: SFProDisplay-Regular, SFProDisplay;
                    }
                    }
                    ._list_info {
                        color: rgba(255, 236, 201, 1);
                        font-size: 12px;
                        margin: 9px 0 8px 0;
                    }
                    ._list_type {
                        color: rgba(255, 236, 201, 1);
                        font-size: 12px;
                    }
                }
                ._list_up {
                    width: 13px;
                    height: 64px;
                    color: rgba(255, 236, 201, 1);
                    font-size: 12px;
                    font-weight: 500;
                    position: absolute;
                    top: 0;
                    right: 9px;
                    z-index: 10;
                    box-sizing: border-box;
                    padding-top: 10px;
                    line-height: 16px;
                }
            }
            ._item_list:last-child {
                margin-right: 0px;
            }
        }
        ._item_main {
            width: auto;
            display: flex;
            padding: 5px;
            box-sizing: border-box;
            ._main_item {
                width: 108px;
                height: 143px;
                overflow: hidden;
                margin-right: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                ._item_list_image {
                    position: absolute;
                    width: 108px;
                    height: 143px;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._main_next {
                    width: 108px;
                    height: 143px;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    ._main_title {
                        width: 108px;
                        height: 16px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        color: #ffffff;
                        font-size: 12px;
                        margin: 7px 0 24px 0;
                        text-align: center;
                    }
                    ._main_list {
                        height: 18px;
                        display: flex;
                        margin-bottom: 8px;
                        ._main_icon {
                            height: 12px;
                            line-height: 12px;
                            color: #ffffff;
                            font-size: 12px;
                            margin-top: 5px;
                        }
                        ._main_number {
                            height: 18px;
                            line-height: 18px;
                            font-size: 18px;
                            font-size: 18px;
                            font-weight: 500;
                            color: #ffffff;
                        }
                    }
                    ._main_info {
                        width: 108px;
                        height: 12px;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 12px;
                        margin-bottom: 8px;
                    }
                    ._main_type {
                        width: 108px;
                        height: 12px;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: rgba(255, 255, 255, 0.7);
                        font-size: 12px;
                        margin-bottom: 10px;
                    }
                    ._main_button {
                        width: 76px;
                        height: 22px;
                        background: #FAFAFA;
                        border-radius: 11px;
                        text-align: center;
                        line-height: 22px;
                        color: rgba(244, 63, 63, 1);
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 22px;

                    }
                }
            }
            ._main_item:last-child {
                margin-right: 0px;
            }
        }
        ._item_ricl {
            width: auto;
            display: flex;
            padding: 5px;
            box-sizing: border-box;
            ._ricl_item {
                width: 108px;
                height: 121px;
                overflow: hidden;
                margin-right: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                ._item_ricl_image {
                    position: absolute;
                    width: 108px;
                    height: 121px;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._ricl_wrap {
                    position: absolute;
                    width: 108px;
                    height: 121px;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    padding-top: 44px;
                    ._ricl_list {
                        height: 18px;
                        display: flex;
                        margin-bottom: 6px;
                        ._ricl_icon {
                            height: 12px;
                            line-height: 12px;
                            color: rgba(255, 223, 181, 1);
                            margin-top: 5px;
                        }
                        ._ricl_number {
                            color: rgba(255, 223, 181, 1);
                            font-size: 18px;
                            font-weight: 500;
                            height: 18px;
                            line-height: 18px;
                        }
                    }
                    ._ricl_info {
                        height: 12px;
                        color: rgba(255, 223, 181, 1);
                        line-height: 12px;
                        margin-bottom: 8px;
                    }
                    ._ricl_button {
                        width: 58px;
                        height: 18px;
                        background: #FFDFB5;
                        border-radius: 4px 4px 10px 10px;
                        text-align: center;
                        line-height: 18px;
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                        font-weight: 500;
                    }
                }
            }
            ._ricl_item:last-child {
                margin-right: 0px;
            }
        }
        ._item_hire {
            width: auto;
            display: flex;
            padding: 5px;
            box-sizing: border-box;
            ._hire_item {
                width: 108px;
                height: 121px;
                overflow: hidden;
                margin-right: 4px;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                ._item_hire_image {
                    position: absolute;
                    width: 108px;
                    height: 121px;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._hire_wrap {
                    position: absolute;
                    width: 108px;
                    height: 121px;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    padding-top: 22px;
                    ._hire_list {
                        height: 18px;
                        display: flex;
                        margin-bottom: 6px;
                        ._hire_icon {
                            height: 12px;
                            line-height: 12px;
                            color: rgba(238, 78, 89, 1);
                            margin-top: 5px;
                        }
                        ._hire_number {
                            color: rgba(238, 78, 89, 1);
                            font-size: 18px;
                            font-weight: 500;
                            height: 18px;
                            line-height: 18px;
                        }
                    }
                    ._hire_info {
                        height: 12px;
                        color: rgba(238, 78, 89, 1);
                        line-height: 12px;
                        margin-bottom: 5px;
                    }
                    ._hire_type {
                        height: 12px;
                        color: rgba(238, 78, 89, 1);
                        line-height: 12px;
                        margin-bottom: 23px;
                    }
                    ._hire_button {
                        width: 68px;
                        height: 18px;
                        background: #FFD549;
                        border-radius: 9px;
                        line-height: 18px;
                        text-align: center;
                        line-height: 18px;
                        color: rgba(245, 51, 65, 1);
                        font-size: 12px;
                        font-weight: 500;
                    }
                }
            }
            ._hire_item:last-child {
                margin-right: 0px;
            }
        }
    }
    ._big {
        width: 375px;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        ._big_item {
            width: 375px;
            display: flex;
            padding: 15px;
            overflow: hidden;
            flex-wrap: wrap;
            box-sizing: border-box;
            ._big_list {
                width: 167px;
                height: 101px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 11px;
                margin-top: 15px;
                ._big_list_image {
                    width: 167px;
                    height: 101px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._big_wrap {
                    width: 167px;
                    height: 101px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-top: 15px;
                    align-items: center;
                    ._big_top {
                        height: 32px;
                        width: 167px;
                        margin-bottom: 29px;
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        ._big_item_list {
                            width: 73px;
                            display: flex;
                            height: 26px;
                            justify-content: center;
                            ._big_icon {
                                color: rgba(255, 255, 255, 1);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                                font-weight: 500;
                                margin-top: 10px;
                            }
                            ._big_number {
                                font-size: 20px;
                                font-weight: 500;
                                height: 26px;
                                line-height: 26px;
                                color: #ffffff;
                            }
                        }
                        ._big_line {
                            width: 1px;
                            height: 32px;
                            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 48%, rgba(255, 255, 255, 0) 100%);
                            margin-right: 12px;
                        }
                        ._big_detail {
                            height: 36px;
                            display: flex;
                            flex-direction: column;
                            ._big_info {
                                color: rgba(255, 255, 255, 0.9);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                                margin-bottom: 8px;
                            }
                            ._big_type {
                                color: rgba(255, 255, 255, 0.9);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                            }
                        }
                    }
                    ._big_button {
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        font-weight: 500;
                    }
                }
            }
            ._big_list:nth-child(1), ._big_list:nth-child(2){
                margin-top: 0;
            }
            ._big_list:nth-child(even) {
                margin-right: 0;
            }
            ._big_two_list {
                width: 167px;
                height: 84px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 11px;
                margin-top: 15px;
                ._item_list_image {
                    width: 167px;
                    height: 84px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._item_list_button {
                    width: 33px;
                    height: 84px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 1;
                }
                ._item_list_wrap {
                    width: 134px;
                    height: 84px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-left: 18px;
                    padding-top: 12px;
                    ._list {
                        height: 18px;
                        display: flex;
                        ._list_icon {
                            color: rgba(255, 236, 201, 1);
                            font-size: 12px;
                            height: 12px;
                            line-height: 12px;
                            margin-top: 4px;
                        }
                        ._list_number {
                            color: rgba(255, 236, 201, 1);
                            font-size: 17px;
                            font-weight: 500;
                            font-family: SFProDisplay-Regular, SFProDisplay;
                        }
                    }
                    ._list_info {
                        color: rgba(255, 236, 201, 1);
                        font-size: 12px;
                        margin: 9px 0 8px 0;
                    }
                    ._list_type {
                        color: rgba(255, 236, 201, 1);
                        font-size: 12px;
                    }
                }
                ._list_up {
                    width: 13px;
                    height: 64px;
                    color: rgba(255, 236, 201, 1);
                    font-size: 12px;
                    font-weight: 500;
                    position: absolute;
                    top: 0;
                    right: 9px;
                    z-index: 10;
                    box-sizing: border-box;
                    padding-top: 10px;
                    line-height: 16px;
                }
            }
            ._big_two_list:nth-child(1), ._big_two_list:nth-child(2){
                margin-top: 0;
            }
            ._big_two_list:nth-child(even) {
                margin-right: 0;
            }
            ._big_three_list {
                width: 167px;
                height: 104px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 11px;
                margin-top: 15px;
                ._item_list_image {
                    width: 167px;
                    height: 104px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._three_wrap {
                    width: 167px;
                    height: 104px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-top: 21px;
                    align-items: center;
                    ._three_top {
                        height: 32px;
                        width: 167px;
                        margin-bottom: 25px;
                        display: flex;
                        align-items: center;
                        box-sizing: border-box;
                        ._three_left {
                            width: 73px;
                            display: flex;
                            height: 26px;
                            justify-content: center;
                            ._three_icon {
                                color: rgba(238, 78, 89, 1);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                                font-weight: 500;
                                margin-top: 10px;
                            }
                            ._three_number {
                                font-size: 20px;
                                font-weight: 500;
                                height: 26px;
                                line-height: 26px;
                                color: rgba(238, 78, 89, 1);
                            }
                        }
                        ._three_detail {
                            height: 36px;
                            display: flex;
                            flex-direction: column;
                            margin-left: 15px;
                            ._three_info {
                                color: rgba(238, 78, 89, 1);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                                margin-bottom: 8px;
                            }
                            ._three_type {
                                color: rgba(238, 78, 89, 1);
                                font-size: 12px;
                                height: 12px;
                                line-height: 12px;
                            }
                        }
                    }
                    ._three_button {
                        width: 69px;
                        height: 18px;
                        background: #FFD549;
                        border-radius: 9px;
                        text-align: center;
                        line-height: 18px;
                        font-size: 12px;
                        color: rgba(245, 51, 65, 1);
                    }
                }
            }
            ._big_three_list:nth-child(1), ._big_three_list:nth-child(2){
                margin-top: 0;
            }
            ._big_three_list:nth-child(even) {
                margin-right: 0;
            }
            ._big_fore_list {
                width: 167px;
                height: 180px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 11px;
                margin-top: 15px;
                ._item_fore_bg {
                    width: 167px;
                    height: 180px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._item_fore_button {
                    width: 47px;
                    height: 47px;
                    position: absolute;
                    left: 60px;
                    top: 10px;
                    z-index: 20;
                }
                ._for_wrap {
                    width: 167px;
                    height: 180px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    box-sizing: border-box;
                    padding-top: 81px;
                    ._fore_price {
                        display: flex;
                        height: 26px;
                        margin-bottom: 10px;
                        ._fore_icon {
                            color: rgba(255, 236, 201, 1);
                            font-size: 12px;
                            font-weight: 500;
                            height: 12px;
                            line-height: 12px;
                            margin-top: 10px;
                        }
                        ._fore_number {
                            color: rgba(255, 236, 201, 1);
                            font-size: 26px;
                            line-height: 26px;
                            font-weight: 500;
                        }
                    }
                    ._fore_next {
                        display: flex;
                        align-items: center;
                        height: 12px;
                        margin-bottom: 14px;
                        ._fore_line {
                            width: 10px;
                            height: 1px;
                            background: rgba(255, 236, 201, 1);
                        }
                        ._fore_type {
                            font-size: 12px;
                            color: rgba(255, 236, 201, 1);
                            margin: 0 6px;
                        }
                    }
                    ._fore_info {
                        color: rgba(255, 236, 201, 1);
                        font-size: 14px;
                    }
                }
            }
            ._big_fore_list:nth-child(1), ._big_fore_list:nth-child(2){
                margin-top: 0;
            }
            ._big_fore_list:nth-child(even) {
                margin-right: 0;
            }
            ._big_five_list {
                width: 167px;
                height: 72px;
                display: flex;
                align-items: center;
                overflow: hidden;
                position: relative;
                margin-right: 11px;
                margin-top: 15px;
                ._item_five_bg {
                    width: 167px;
                    height: 72px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._five_wrap {
                    width: 167px;
                    height: 72px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    ._five_left {
                        width: 95px;
                        height: 72px;
                        margin-left: 3px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        ._five_price {
                            display: flex;
                            height: 26px;
                            margin-bottom: 2px;
                            margin-top: 8px;
                            ._five_icon {
                                color: rgba(255, 255, 255, 1);
                                font-size: 12px;
                                font-weight: 500;
                                height: 12px;
                                line-height: 12px;
                                margin-top: 10px;
                            }
                            ._five_number {
                                color: rgba(255, 255, 255, 1);
                                font-size: 26px;
                                line-height: 26px;
                                font-weight: 500;
                            }
                        }
                        ._five_info {
                            height: 12px;
                            line-height: 12px;
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.9);
                            margin-bottom: 4px;
                        }
                        ._five_type {
                            height: 12px;
                            line-height: 12px;
                            font-size: 12px;
                            color: rgba(255, 255, 255, 0.9);
                        }
                    }
                    ._five_button {
                        width: 28px;
                        color: rgba(82, 80, 80, 1);
                        font-size: 14px;
                        font-weight: 500;
                        margin-left: 20px;
                        line-height: 18px;
                    }
                }
            }
            ._big_five_list:nth-child(1), ._big_five_list:nth-child(2){
                margin-top: 0;
            }
            ._big_five_list:nth-child(even) {
                margin-right: 0;
            }
        }
    }
    ._sing {
        width: 375px;
        overflow: hidden;
        box-sizing: border-box;
        ._sing_item {
            width: 375px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            align-items: center;
            box-sizing: border-box;
            padding: 10px 0;
            ._sing_list {
                width: 335px;
                height: 86px;
                overflow: hidden;
                margin-bottom: 7px;
                position: relative;
                ._sing_list_image {
                    width: 335px;
                    height: 86px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 0;
                }
                ._sing_button_image {
                    width: 65px;
                    height: 86px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 30;
                }
                ._sing_wrap {
                    width: 335px;
                    height: 86px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    ._sing_left {
                        width: 89px;
                        height: 86px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        margin-right: 10px;
                        ._sing_price {
                            height: 30px;
                            display: flex;
                            margin-bottom: 6px;
                            ._sing_icon {
                                color: rgba(255, 255, 255, 1);
                                font-size: 14px;
                                height: 14px;
                                line-height: 14px;
                                margin-top: 11px;
                                font-weight: 500;
                            }
                            ._sing_number {
                                color: rgba(255, 255, 255, 1);
                                font-size: 26px;
                                height: 30px;
                                line-height: 30px;
                                font-weight: 500;
                            }
                        }
                        ._sing_info {
                            color: rgba(255, 255, 255, 1);
                            font-size: 12px;
                        }
                    }
                    ._sing_center {
                        width: 140px;
                        display: flex;
                        flex-direction: column;
                        ._sing_title {
                            height: 24px;
                            line-height: 24px;
                            color: rgba(255, 255, 255, 1);
                            font-size: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-bottom: 4px;
                        }
                        ._sing_date {
                            height: 12px;
                            line-height: 12px;
                            color: rgba(255, 255, 255, 0.8);
                            white-space: nowrap;
                            margin-bottom: 10px;
                            font-size: 12px;
                        }
                        ._sing_type {
                            height: 12px;
                            line-height: 12px;
                            color: rgba(255, 255, 255, 0.8);
                            white-space: nowrap;
                            font-size: 12px;
                        }
                    }
                    ._sing_button {
                        width: 66px;
                        height: 32px;
                        background: #FFEACA;
                        border-radius: 16px;
                        text-align: center;
                        line-height: 32px;
                        color: rgba(255, 22, 71, 1);
                        font-size: 12px;
                        font-weight: 500;
                        margin-left: 14px;
                    }
                    ._sing_button_to {
                        width: 45px;
                        height: 45px;
                        border-radius: 50%;
                        font-size: 12px;
                        color: rgba(245, 51, 51, 1);
                        background: rgba(255, 221, 163, 1);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        ._sing_button_to_text {
                            width: 24px;
                            line-height: 15px;
                        }
                    }
                    ._sing_five_button {
                        width: 68px;
                        height: 23px;
                        border-radius: 10px 0px 0px 10px;
                        text-align: center;
                        line-height: 23px;
                        font-size: 12px;
                        white-space: nowrap;
                        position: absolute;
                        right: 0;
                        bottom: 12px;
                        z-index: 99;
                    }
                    ._sing_linr {
                        width: 1px;
                        height: 56px;
                        background: linear-gradient(180deg, rgba(255, 221, 163, 0) 0%, #FFDDA3 48%, rgba(255, 221, 163, 0) 100%);
                        position: absolute;
                        top: 11px;
                        left: 90px;
                        z-index: 22;
                    }
                    ._sing_button_three {
                        width: 15px;
                        font-size: 14px;
                        line-height: 15px;
                        margin-left: 36px;
                    }
                }
            }
            ._sing_list:last-child {
                margin-bottom: 0px;
            }
        }
    }
}
</style>